
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    {block name="link"}

    {/block}
</head>
<body>



   <div  id="contents"   :class="tops==1?'cons':''"   v-cloak>

        <!--浮动的微信二维码 和 电话-->
         <div class="fudong">
          <div  class="infens"  @click="tapkefu()">
              <img   :src="phone" />
              <div>联系电话</div>
              <div class="factphone" v-show="kefu==1">
                  <div><div>服务热线</div><div>(028) 135550342811</div></div>
                  <div><div>招聘热线</div><div>(028) 135550342811</div></div>
              </div>
          </div>
          <div  class="infens" @click="taperweima()">
              <img   :src="weixin" />
              <div>微信</div>
              <div v-show="erweimastate==1" class="erwei"><img  :src="erweima" /></div>
          </div>
          <div class="infensd" @click="totopd()"><img  :src="totop" /></div>
      </div>



       <!--电脑端 导航-->
       <div  class="head">
       <div class="logo"><img  :src="logo" /></div>
           <!--点击选择语言显示-->
       <div class="navigation">
            <ul class="firul">
             <li   :class="indexdd==index?'activehead':''"    v-for="(item , index)  in  navigation"  :key="index"  @click="mtappd(item.src)"  @mouseover="tappa($event,index)"  @mouseout="tappb($event,index)"   @click="tapsdd(index)">{{item.yi}}
               <ul  v-if="item.erji"  class="next" style="display: none">
                   <li  @click="xiqnging(items.srcc)"   v-for="(items,indexd) in   item.erji"   :key="indexd">{{items.name}}</li>
               </ul>
             </li>
            </ul>
       </div>

      <div class="ljyuding" @click="lijiyudingd">立即预定</div>
       <div class="login">
           <div v-if="login==0"   @click="denglud" >登录</div>
           <div v-else>胡杰</div>
         <div  @click="taps"><img :src="topjian" /><div>{{sss[langua].name}}</div></div>
       </div>
           <!--语言选择-->
        <div class="language"  v-show="show==1">
            <div  v-for="(item,index)  in sss"  :key="index"  @click="languges(index)"><img :src="item.img"  /><div>{{item.name}}</div></div>
        </div>
       </div>


    <!--手机端 1200 以下的 导航-->
   <div class="heads" style="display: none">
       <div  class="menu"   @click="mmenu()"><img  :src="menu" /></div>
       <div class="logo"><img  :src="logo" /></div>
       <div class="navigation" v-show="menustate==0">
           <ul class="firul">
               <li   :class="indexdd==index?'activehead':''"    class="chang"   v-for="(item , index)  in  navigation"  :key="index"  :srcd="item.src"    @click="mtapp(index)">{{item.yi}}
                   <ul   v-if="item.erji"  class="next" style="display: none" >
                       <li  @click="xiqnging(items.srcc)"   v-for="(items,indexd) in   item.erji"  :key="indexd">{{items.name}}</li>
                   </ul>
               </li>
           </ul>
       </div>

       <div class="ljyuding" @click="lijiyudingd">立即预定</div>
       <div class="login">
           <div v-if="login==0"   @click="denglud">登录</div>
           <div v-else>胡杰</div>
           <div  @click="taps"><img :src="topjian" /><div>{{sss[langua].name}}</div></div>
       </div>
       <!--语言选择-->
       <div class="language"  v-show="show==1">
           <div  v-for="(item,index)  in sss"  :key="index"  @click="languges(index)"><img :src="item.img"  /><div>{{item.name}}</div></div>
       </div>
   </div>

     <!--登录弹窗-->
       <div class="all"  v-show="loginstate==0">
           <div   class="logind" >
               <div><div>会员登录</div></div>
               <div><img  :src="account" /><input  type="number" placeholder="请输入手机号码" /></div>
               <div><img  :src="password"  /><input type="password" placeholder="请输入密码" /></div>
               <div><a  href="huwangjimima.html" >忘记密码?</a><a   target="_blank"  @click="tozhuce">免费注册</a></div>
               <div>立即登录</div>
               <img @click="quxiao"  class="quxiaoimg" :src="closeimg" >
           </div>
       </div>

       <!--注册弹窗-->
       <div class="alld"  v-show="wangjistate==0">
           <div   class="loginsd" >
               <div><div>会员注册</div></div>
               <div><img :src="account" ><input  type="number" placeholder="请输入手机号码" /></div>
               <div><img :src="message" ><input  placeholder="请输入验证码" /><input value="发送验证码"  readonly="readonly" /></div>
               <div><img :src="password" ><input  placeholder="请输入新密码" /></div>
               <div><img :src="password" ><input  placeholder="请再次输入新密码" /></div>
               <div>立即注册</div>
               <img @click="fanhui"  class="quxiaoimg" :src="closeimg" >
           </div>
       </div>

             <!-- 立即预定弹窗 -->
       <div class="allddd"  v-show="lijiyuding==0">
           <div   class="liji" >
              <div class="lijitop">
                <div><img :src="rilis">  <input type="date"   id="test1"/></div>
                <div><img :src="rilis">  <input type="date"  id="test2"/></div>
              </div>
               <div class="lijim">

                   <div>
                       <div>房型</div>
                           <select>
                               <option>总统套房</option>
                               <option>海景套房</option>
                               <option>标准套房</option>
                               <option>单人套房</option>
                           </select>
                   </div>

                   <div class="lijiright">
                       <div>
                           <div>成人</div>
                           <div>
                               <div>-</div>
                               <div>0</div>
                               <div>+</div>
                           </div>
                       </div>
                       <div>
                           <div>儿童</div>
                           <div>
                               <div>-</div>
                               <div>0</div>
                               <div>+</div>
                           </div>
                       </div>
                   </div>
               </div>

               <div class="lijib">
                   立即预定
               </div>
               <div class="lijib   lijibd"  @click="quxiaoyuding">
                   取消预定
               </div>
           </div>
       </div>

   </div>
   {block name="main"}
   {/block}


<!-- 友情链接  -->
   <div class="lianji">
       <div>
           <div>友情链接：</div>
           <div>
               <img  src="__STATIC__/index/img/yq1.jpg"  />
               <img  src="__STATIC__/index/img/yq3.jpg"  />
               <img  src="__STATIC__/index/img/yq2.jpg"  />
               <img  src="__STATIC__/index/img/yq1.jpg"  />
               <img  src="__STATIC__/index/img/yq3.jpg"  />
           </div>
       </div>
   </div>


<!--底部-->
   <div   id="footer" class="footer"  style="background-image: url('__STATIC__/index/img/dibg.jpg');background-repeat: no-repeat;background-size: 100% 100%;">
       <div  class="footermain">
           <div class="left"> <div><img   :src="logo" /></div></div>
           <div class="middle">
               <div class="midtop">
                   <div>
                       <div>អំពីយើង។</div>
                       <div>អំពីយើង។</div>
                       <div>អំពីយើង។</div>
                   </div>
                   <div>
                       <div>អំពីយើង។</div>
                       <div>អំពីយើង។</div>
                       <div>អំពីយើង។</div>
                   </div>
                   <div>
                       <div>អំពីយើង។</div>
                       <div>អំពីយើង។:(855)0319899999</div>
                       <div>អំពីយើង។: 319899999@qq.cpm</div>
                   </div>
               </div>
               <div class="midmid">
                   <div>សណ្ឋាគារខេមបូឌាប៊្លុយប៊ែលវ៉ាដសាន់ចនអន្តរជាតិគឺជាសណ្ឋាគារលំដាប់ផ្កាយប្រាំអន្តរជាតិ។</div>
                   <div>អាសយដ្ឋានសណ្ឋាគារ៖ ឆ្នេរឯករាជ្យលេខ ២ ភូមិ ១ លេខ ៣ ក្រុងព្រះសីហនុប្រទេសកម្ពុជា។</div>
               </div>
               <div  class="middbot">
                   រក្សាសិទ្ធិ© ២០១៩-២០១៩, www.xxxxxx.com រក្សាសិទ្ធិគ្រប់យ៉ាង។ ឈ្មោះគេហទំព័ររបស់អ្នកត្រូវហាមឃាត់ដាច់ខាតដោយគ្មានការអនុញ្ញាត។
               </div>

           </div>
           <div  class="right">
               <div>
                   <div><img   :src="erweima"  /> <div>ជ្រើសរើសលេខកូដ QR ។</div></div>
                   <div><img   :src="erweima"  /> <div>លេខកូដ QR សាធារណៈ។</div></div>
               </div>
               <div>服务热线：（855）0318199999</div>
           </div>
       </div>
   </div>


</body>
{block name="js"}

{/block}
<script>

  var head=  new  Vue({
        el:"#contents",
        data:{
            languaged:'1',//语言种类
            login:0,//登录状态
            loginstate:1,//登录界面
            wangjistate:1,//忘记密码
            lijiyuding:1, //立即预定
            menu:'__STATIC__/index/img/menu.png', //手机端菜单
            totop:'__STATIC__/index/img/totop.png', // 回到顶部图标
            weixin:"__STATIC__/index/img/weixin.png",  //微信图标
            phone:"__STATIC__/index/img/phone.png",  // 电话图标
            erweima:"__STATIC__/index/img/erweima.jpg",//二维码图标
            closeimg:"__STATIC__/index/img/closeimg.png",//关闭图标
            account:"__STATIC__/index/img/account.png",//账户图标
            password:"__STATIC__/index/img/password.png",//密码图标
            message:"__STATIC__/index/img/message.png",//短信图标
            rilis:"__STATIC__/index/img/rilis.png",//日历图标
            navigation:[
                {yi:"首页",src:"index.html"},
                {yi:"酒店简介",src:"hujianjie.html"},
                {yi:"酒店房型",erji:[{name:"海景客房",srcc:"hufangxing.html"},{name:"总统套房",srcc:"hufangxing.html"},{name:"海景客房",srcc:"hufangxing.html"}],src:"hucanying.html"},
                {yi:"餐饮美食",erji:[{name:"海景餐厅",srcc:"hucanying.html"},{name:"沙滩酒吧",srcc:"hucanying.html"},{name:"大堂吧",srcc:"hucanying.html"}],src:"hucanying.html"},
                {yi:"休闲娱乐",src:"huxiuxian.html"},
                {yi:"酒店资讯",src:"huzixun.html"},
                {yi:"联系我们",src:"hulianxiwomen.html"},
                {yi:"人才招聘",src:"hulianxiwomen.html"}
        ],
            topjian:'__STATIC__/index/img/sanjiao.png',
            logo:"__STATIC__/index/img/logo.png",
            tops:0,
            indexdd:0,  //导航栏选择
            show:0,//控制语言选择
            langua:2,
            sss:[   //语言选择的国家 和 名字
                {img:"__STATIC__/index/img/jpz.png",name:"KH"},
                {img:"__STATIC__/index/img/English.png",name:"GB"},
                {img:"__STATIC__/index/img/chinise.png",name:"CN"},
            ],
            menustate:1,
            kefu:0,  //电话
            erweimastate:0,//二维码
        },
        methods:{
            // 控制导航栏的 背景颜色方法
            handleScroll:function () {
             var scoll=  document.documentElement.scrollTop;
             if(scoll!=0){
                 this.tops=1
             }else{
                 this.tops=0
             }
            },
            // 一级导航栏的hover 效果
            tappa(e,index){
            var sss=    $(".firul>li").eq(index)
                sss.children(".next").css("display","block")
            },
            tappb(e,index){
                $(".next").css("display","none")
            },

            //一级导航栏导航栏选择 点击之后的效果 字体变黄
            tapsdd(index){
             this.indexdd=index
            },
            // 语言选择点击
            taps:function() {
                var ss=this.show;
                console.log(ss)
               if(ss==0){
                   this.show=1
               }
            },
            // 具体语言选择
            languges(index){
                this.langua=index
                this.show=0
            },
            // 手机端 点击导航栏
            mmenu ($event) {
                var s=this.menustate;
                if(s==0){
                    this.menustate=1;
                }else{
                    this.menustate=0;
                }
            },
            mtappd:function(src){
                window.location.href=src;
            },

            // 手机端点击 具体导航栏效果
            mtapp(index){
                var index=index
                this.indexdd=index
                $(".next").css("display","none")
                if(index==2||index==3){

                    var ss=$(".chang").eq(index).children(".next").css("display","block");
                }else{
                 var src=    $(".chang").eq(index).attr("srcd");
                    window.location.href=src;
                }
            },
            xiqnging:function(src){
                var  src=src;
                window.location.href=src;
            },

            //点击在线电话
            tapkefu:function () {
                var  kefu=this.kefu;
                if(kefu==0){
                    this.kefu=1
                }else{
                    this.kefu=0
                }
            },
            //点击二维码
            taperweima:function () {
                var  erweimastate=this.erweimastate;
                if(erweimastate==0){
                    this.erweimastate=1
                }else{
                    this.erweimastate=0
                }
            },

            //点击右边浮动的返回顶部
            totopd:function () {
                // document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            },
            //点击登录
            denglud:function(){
                this.loginstate=0;
            },
            //登录页面点击取消
            quxiao:function () {
                this.loginstate=1;
            },
            //点击注册页面返回
            fanhui:function () {
                this.wangjistate=1;
            },
            //点击免费注册
            tozhuce:function () {
                this.wangjistate=0;
            },
            //点击立即预定
            lijiyudingd:function () {
                this.lijiyuding=0
            },
            //点击取消预定
            quxiaoyuding:function () {
                this.lijiyuding=1
            }

        },
        created(){


        },
        mounted(){  //监听页面滚动   改变导航栏的透明度
            window.addEventListener('scroll', this.handleScroll, true)
        }



    })
 var foot=   new  Vue({
        el:"#footer",
        data:{
            logo:"__STATIC__/index/img/logo.png",
            erweima:"__STATIC__/index/img/erweima.jpg",
        },
        methods:{

        },
        created(){

        },
        mounted() {
        }
    })


</script>
{block name="xia"}

{/block}

</html>